<template>
  <view v-if="cart.length !== 0">
    <my-address></my-address>
    <view class="cart-title">
      <uni-icons type="shop" size="18"></uni-icons>
      <text class="cart-title-name">购物车</text>
    </view>
    <uni-swipe-action>
      <block class="cart-info" v-for="(goods, i) in cart" :key="i">
        <uni-swipe-action-item :options="options" @click="swipeActionClickHandler(goods)">
          <my-goods :goods="goods" :isShowRadio="true" :isShowNum="true" @radio-change="radioChangeHandler" @num-change="numChangeHander"></my-goods>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>
    <my-settle></my-settle>
  </view>
  <view class="empty-cart" v-else>
    <text>购物车空空如也~</text>
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    mixins: [badgeMix],
    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#C00000'
          }
        }, ]
      };
    },
    computed: {
      ...mapState('my_cart', ['cart']),

    },
    methods: {
      ...mapMutations('my_cart', ['updateGoodsState', 'updateGoodsCount','removeGoods']),
      radioChangeHandler(e) {
        this.updateGoodsState(e);
      },
      numChangeHander(e) {
        console.log(e);
        this.updateGoodsCount(e);
      },
      swipeActionClickHandler(e){
        this.removeGoods(e.goods_id);
      }
    }
  }
</script>

<style lang="scss">
  .cart-title {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-left: 5px;
    border-bottom: 1px solid #efefef;

    .cart-title-name {
      margin-left: 10px;
    }
  }
  .empty-cart{
    font-size: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: #c1a766;
  }
</style>
